import Vue from 'vue'
// 定义全局自定义指令(输入框自动聚焦)
// 封装中间件插件
const directiveObj = Vue.directive('focus', {
  // 指令所在标签，被插入到真实DOM时才触发，如果标签用display: none隐藏再出现，不会再触发inserted的
  inserted(el) {
    if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
      el.focus()
    } else {
      // el本身不是输入框，尝试往里获取一下
      setTimeout(() => {
        const theInput = el.querySelector('input')
        const theTextarea = el.querySelector('textarea')
        if (theInput) theInput.focus()
        if (theTextarea) theTextarea.focus()
      }, 400)
    }
  },
  // 指令所在标签更新时触发
  update(el) {
    if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
      el.focus()
    } else {
      // el本身不是输入框，尝试往里获取一下
      setTimeout(() => {
        const theInput = el.querySelector('input')
        const theTextarea = el.querySelector('textarea')
        if (theInput) theInput.focus()
        if (theTextarea) theTextarea.focus()
      }, 400)
    }
  }
})
export default directiveObj
